<template>
  <select
    class="select-game-type"
    v-model="select_type"
    @change="$emit('change', $event.target.value)"
  >
    <slot name="types" v-for="(type) in types" :type="type"></slot>
  </select>
</template>

<script>

export default {
  name: "selectGameType",
  model: {
    prop: "select_type",
    event: "change"
  },
  props: {
    types: {
      types: Array,
      default() {
        return [];
      }
    },
    select_type: {}
  }
};
</script>

<style scoped>
select {
  height: 40px;
  border-radius: 0;
  padding: 0 14px;
  color: #f4f4f4;
  -webkit-appearance: none;
  /* text-align: center; */
  /* text-align-last: center; */
  display: block;
  background: #484848;
  outline: none;
  width: 100%;
}

select:hover {
  background: #444;
}
</style>
